<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div style="width: 100%;">
    <!--公司详细信息-->
    <el-form ref="compinfo" :model="compinfo" status-icon label-position="left"
             label-width="124px" style="width: 100%; display: flex;padding-bottom: 30px">
      <div style="flex: 1;margin-left: 15px">
        <el-form-item label="中征码：" style="margin-bottom: 0">
          <span>{{ compinfo.loanCardNo }}</span>
        </el-form-item>
        <el-form-item label="公司名称：" style="margin-bottom: 0">
          <span>{{ compinfo.companyName }}</span>
        </el-form-item>
        <el-form-item label="统一信用代码：" style="margin-bottom: 0">
          <span>{{ compinfo.unicode }}</span>
        </el-form-item>
      </div>
      <div style="flex: 1">
        <el-form-item label="法人姓名：" style="margin-bottom: 0">
          <span>{{ compinfo.legalName }}</span>
        </el-form-item>
        <el-form-item label="法人手机号：" style="margin-bottom: 0">
          <span>{{ compinfo.legalMobile }}</span>
        </el-form-item>
        <el-form-item label="法人证件号码：" style="margin-bottom: 0">
          <span>{{ compinfo.legalID }}</span>
        </el-form-item>
      </div>
    </el-form>

    <div style="width: 100%;display:flex;">
      <el-form ref="userInfo" :rules="userInfoRules" :model="userInfo" status-icon label-position="left"
               label-width="150px" style="width: 55%;padding-right: 15px;">
        <el-form-item label="承兑行：" prop="acceptBankNo">
          <el-select v-model="userInfo.acceptBankNo" filterable style="width: 100%">
            <el-option
              v-for="item in unionnos"
              :key="item.bankCode"
              :label="item.bankName"
              :value="item.bankCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="贴现日期：" prop="applyDate">
          <el-date-picker
            style="width:100%"
            v-model="userInfo.applyDate"
            type="date"
            placeholder="贴现日期"
            value-format="yyyy/MM/dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="票面到日期：" prop="dueDate">
          <el-date-picker
            style="width: 100%"
            v-model="userInfo.dueDate"
            type="date"
            placeholder="票面到日期"
            value-format="yyyy/MM/dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="票面金额（元）：" prop="faceAmount">
          <el-input v-model="userInfo.faceAmount" auto-complete="off" placeholder="请输入票面金额"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 50%" @click="ratesearchList" v-loading.fullscreen.lock="fullscreenLoading">查询贴现利率</el-button>
        </el-form-item>
      </el-form>

      <!--右侧银行状态-->
      <el-form style="width: 45%;">
        <div class="bacnk_fon" v-for="(item, index) in bankCodeList">
          <!--<div class="bacnk_fon" v-for="(item, index) in unicodeList">-->
          <!--银行名称-->
          <div class="font-cs">
            <a>{{ item.label }}</a>
            <!--<a>{{ item.bankCode | bankCodeFilter }}</a>-->
            <div style="padding: 25px 0 20px 0;" v-if="item.bankCodeListbol && item.bol">
              <el-button type="success" style="text-align: center" @click="discount">查看网银贴现</el-button>
            </div>
          </div>

          <!--银行签约状态-->
          <div class="button_cs" style="padding-top: 20px" v-for="items in unicodeList" v-if="!item.bankCodeListbol">
            <div class="siging-font" v-if="item.value == items.bankCode">
              <span>{{ items.status | statusFilter }}</span>
            </div>
            <div class="siging-font" v-else>
              <span>未签约</span>
            </div>
          </div>

          <!--银行利率-->
          <div class="button_cs" v-if="item.bankCodeListbol && item.bol">
            <el-form-item label="贴现利率：" style="margin: 0" v-if="userInfoList.chkResult != '000000'">
              <span>{{ item.billRate }}</span>
            </el-form-item>
            <el-form-item label="实付金额：" style="margin: 0" v-if="userInfoList.chkResult != '000000'">
              <span>{{ item.realMoney }}</span>
            </el-form-item>
            <el-form-item label="贴现利息：" style="margin: 0" v-if="userInfoList.chkResult != '000000'">
              <span>{{ item.interest }}</span>
            </el-form-item>
            <el-form-item label="查询结果：" style="margin: 0" v-else>
              <span>{{ item.chkResult | chkResultFilte }}</span>
            </el-form-item>
          </div>

        </div>
      </el-form>
    </div>

    <!--网银直贴弹窗-->
    <el-dialog :visible.sync="signingVisible" title="网银贴现信息" :close-on-click-modal="false">
      <el-alert
        title="温馨提示：请到网银进行直贴请求！"
        type="warning"
        show-icon
        :closable="false"/>
      <el-form ref="signingForm" :model="signingForm" status-icon label-position="left"
               label-width="150px" style="width: 750px; margin-left:50px;padding-top: 30px;display: flex">
        <div style="flex: 1">
          <el-form-item label="贴入行名称：" style="margin-bottom: 0">
            <span>重庆富民银行股份有限公司</span>
          </el-form-item>
          <el-form-item label="贴入人大小额行号：" style="margin-bottom: 0">
            <span>323653010015</span>
          </el-form-item>
          <el-form-item label="贴入人账号：" style="margin-bottom: 0">
            <span>0</span>
          </el-form-item>
          <el-form-item label="清算方式：" style="margin-bottom: 0">
            <span>线下清算</span>
          </el-form-item>
          <el-form-item label="贴现种类：" style="margin-bottom: 0">
            <span>买断式</span>
          </el-form-item>
        </div>
        <div style="flex: 1" v-for="(item, index) in bankCodeList" v-if="item.bankCodeListbol">
          <el-form-item label="贴现利率（%）：" style="margin: 0" v-if="userInfoList.chkResult != '000000'">
            <span>{{ item.billRate }}</span>
          </el-form-item>
          <el-form-item label="实付金额（元）：" style="margin: 0" v-if="userInfoList.chkResult != '000000'">
            <span>{{ item.realMoney }}</span>
          </el-form-item>
          <el-form-item label="贴现利息（元）：" style="margin: 0" v-if="userInfoList.chkResult != '000000'">
            <span>{{ item.interest }}</span>
          </el-form-item>
          <el-form-item label="查询结果：" style="margin: 0" v-else>
            <span>{{ item.chkResult | chkResultFilte }}</span>
          </el-form-item>
          <p style="width:200px;color: #C03639"><b>结算金额（贴现实际获得金额）= 票面金额 - 票面金额 * 贴现利率 * 贴现天数/360</b></p>
        </div>
        <!--<el-form-item label="贴入行名称：">
          <span>辽宁振兴银行股份有限公司</span>
        </el-form-item>
        <el-form-item label="贴入人大小额行号：">
          <span>3233221000086</span>
        </el-form-item>
        <el-form-item label="贴入人账号：">
          <span>0</span>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-left:200px;">
        <el-button @click="signingVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'bank',
  components: {Pagination},
  filters: {},
  props: ['unicodeList'],
  data() {
    return {
      bankCodeList: [
        {
          value: '0000',
          label: '富民银行',
          bol: false,           //判断显示未签约
          sigingfont: '未签约',
          chkResult: '',
          billRate: '',
          realMoneyl: '',
          interest: '',
          bankCodeListbol: false      //判断显示已签约
        },
        {
          value: '0001',
          label: '网商银行',
          bol: false,
          sigingfont: '未签约',
          chkResult: '',
          billRate: '',
          realMoneyl: '',
          interest: '',
          bankCodeListbol: false
        },
        {
          value: '0002',
          label: '振兴银行',
          bol: false,
          sigingfont: '未签约',
          chkResult: '',
          billRate: '',
          realMoneyl: '',
          interest: '',
          bankCodeListbol: false
        },
      ],
      list: [],
      unionnos: [],                    //获取承兑行
      compinfoList: [],                //获取公司信息列表
      unicodeList: [],                 //获取签约结果列表
      compinfo: {                      //公司列表表单
        unicode: undefined,
        companyName: undefined,
        loanCardNo: undefined,
        legalName: undefined,
        legalID: undefined,
        legalMobile: undefined
      },
      fullscreenLoading: false,
      userInfo: {
        acceptBankNo: undefined,
        faceAmount: undefined,
        dueDate: undefined,
        applyDate: undefined
      },
      userInfoList: [],
      userInfoRules: {
        acceptBankNo: [{required: true, message: '承兑行行号不允许为空', trigger: 'blur'}],
        faceAmount: [{required: true, message: '票面金额不允许为空', trigger: 'blur'}],
        dueDate: [{required: true, message: '票面到期日不允许为空', trigger: 'blur'}],
        applyDate: [{required: true, message: '贴现日期不允许为空', trigger: 'blur'}],
      },
      signingVisible: false,
      signingForm: {
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**获取公司信息列表*/
    getList() {
      doPost('company.html?op=list', {}).then(response => {
        this.compinfoList = response.rows
        for (var item of this.compinfoList) {
          this.compinfo = item
        }
        this.compinfoList.map((item,index) => {
          if (item.unicode != undefined) {
            this.compinfUnicode = item.unicode
            return
          }
        })
        this.getUnigo(this.compinfUnicode)
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: response.message
        })
      })
    },
    getUnigo(unicode) {
      doGet('company.html?op=signresult', { unicode: unicode }).then(response => {
        this.unicodeList = response.rows
      }).catch(() => {
        this.unicodeList = []
      })
    },
    /**贴现利率查询*/
    ratesearchList() {
      this.$refs['userInfo'].validate(valid => {
        if (valid) {
          this.buttonsss = false
          this.fullscreenLoading = true
          let fd;
          if(this.codes == null) {
            fd = this.compinfUnicode
          } else {
            fd = this.codes
          }
          let sendData = {
            ...this.userInfo,
            unicode: fd
          }
          doGet('ratesearch.html?op=search', sendData).then(response => {
            for (var item of response.rows) {
              this.bankCodeList.some((val) => {
                if (val.value == item.bankCode) {
                  val.chkResult = item.chkResult,
                  val.billRate = item.billRate,
                  val.realMoney = item.realMoney,
                  val.interest = item.interest,
                  val.bankCodeListbol = true
                }
              })
            }
            this.fullscreenLoading = false
          }).catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
            this.fullscreenLoading = false
          })
        }
      })
    },
    /**贴现弹窗*/
    discount() {
      this.signingVisible = true
    },
    /**获取承兑行*/
    getUnioLs() {
      doGet('bank.html?op=list').then(response => {
        this.unionnos = response.rows
      }).catch(() => {
        this.unionnos = []
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  .bacnk_fon {
    display: flex;
    width: 100%;
    height: 120px;
    margin-bottom: 16px;
    box-shadow: 0 0 24px 0 #eee;
    .font-cs {
      flex: 1;
      font-size: 18px;
      font-weight:bold;
      padding: 20px 0 20px 20px;
    }
    .button_cs {
      flex: 1;
      display: inline;
      text-align: right;
      margin: 0;
      padding: 0 20px 0 10px;
      .siging-font {
        width: 60%;
        height:30px;
        border: 1px solid #4E95FA;
        line-height: 25px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        border-radius: 3px;
      }
    }
  }
</style>
